<template>
    <div class="xinZeng_box">
      <leftnav></leftnav>
      <div class="content">
        <div class="top_nav">
          <topnav></topnav>
        </div>
        <div class="content_box">
          <div class="content_head">
            <div class="head_left">商品新增</div>
            <div class="head_right" @click="fanhuifn">返回列表</div>
          </div>
          <div class="content_item">
            <div class="shangPing_name row_i">
              <span>商品名称：</span>
              <div class="inputS"><el-input v-model="input" placeholder="请输入内容"></el-input></div>
            </div>
            <div class="shangPing_jiaGe row_i">
              <span>商品价格：</span>
              <div class="inputS"><el-input v-model="input" placeholder="请输入内容"></el-input></div>
            </div>
            <div class="shangPing_tuiJian row_i">
              <span>是否推荐：</span>
              <el-radio v-model="radio" label="1">是</el-radio>
              <el-radio v-model="radio" label="2">否</el-radio>
            </div>
            <div class="shangPing_fenLei row_i">
              <span>商品分类：</span>
              <div class="inputS">
                <!--<el-select style="width: 400px" v-model="productobj.goods_cate_id" placeholder="请选择">-->
                  <!--<el-option-->
                    <!--v-for="item in options"-->
                    <!--:key="item.goods_cate_id"-->
                    <!--:label="item.goods_cate_name"-->
                    <!--:value="item.goods_cate_id">-->
                  <!--</el-option>-->
                <!--</el-select>-->
              </div>
            </div>
            <div class="shangPing_yuanJia row_i">
              <span>商品原价：</span>
              <div class="inputS"><el-input v-model="input" placeholder="请输入内容"></el-input></div>
            </div>
            <div class="shangPing_miaoSu row_i">
              <span>商品描述：</span>
              <div class="inputS"><el-input v-model="input" placeholder="请输入内容"></el-input></div>
            </div>
            <div class="shangPing_img row_i">
              <span>商品图片：</span>
              <div class="divbox">
                <input type="file" @change="changefn($event)"/>
              </div>
            </div>
            <img  class="upimg" :src="upimg">
            <div class="shangPing_xinZeng row_i">
              <div class="divbox divbox2">新增</div>
            </div>
            <div class="shangPing_baoCun row_i">
              <div class="divbox divbox2">保存</div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import Leftnav from "../../../../components/nav/leftnav";
    import Topnav from "../../../../components/nav/topnav";
    export default {
        name: "xinZeng",
      components: {Topnav, Leftnav},
      data() {
        return {
          input: '',
          radio: '1',
          upimg:'',
        }
      },
      methods: {
        fanhuifn() {
          this.$router.push({path:'home'})
        },
        changefn(e) {
          var f = e.target.files[0]
          var formdata = new FormData();
          formdata.append("file",f)
          let _this = this
          $.ajax({
            url:this.apis+'/common/Upload/UpImg',
            type:'post',
            data:formdata,
            cache: false,
            processData: false,
            contentType: false,
            success: function (res) {
              console.log(res)
              _this.upimg = res.data.src
            }
          })
        },
      }
    }
</script>

<style scoped lang="less">
 .xinZeng_box{
   width: 100%;
   height: 100%;
   min-width: 1350px;
   .content{
     width: 87%;
     margin-left: 200px;
     .content_box{
       width: 100%;
       background-color: #f2f2f2;
       padding: 25px;
       box-sizing: border-box;
       .content_head{
         width: 100%;
         padding: 15px 30px;
         box-sizing: border-box;
         font-size: 12px;
         border-bottom: 1px solid #e4e4e4;
         display: flex;
         justify-content: space-between;
         background-color: white;
         border-bottom: 1px solid #e4e4e4;
         .head_left{
           height: 40px;
           line-height: 40px;
         }
         .head_right{
           width: 98px;
           height: 40px;
           text-align: center;
           line-height: 40px;
           color: white;
           font-size: 14px;
           background-color: #409EFF;
           border-radius: 5px;
           cursor: pointer;
         }
       }
       .content_item{
         width: 100%;
         background-color: white;
         padding-left: 210px;
         box-sizing: border-box;
         .row_i{
           width: 100%;
           height: 70px;
           line-height: 40px;
           padding: 15px 0;
           box-sizing: border-box;
           display: flex;
           span{
             height: 40px;
             line-height: 40px;
             margin-right: 15px;
           }
           .el-radio{
             margin-top: 15px;
           }
           .inputS,.el-autocomplete{
             width: 400px;
           }
           .divbox{
             height: 20px;
             line-height: 20px;
             color: white;
             text-align: center;
             border-radius: 4px;
             font-size: 14px;
             padding: 10px 18px;
             background-color: #409EFF;
             cursor: pointer;
           }
           .divbox2{
             margin-left: 80px;
           }
         }
         .upimg{
           width: 400px;
         }
       }
     }
   }
 }
</style>
